<!DOCTYPE html>
<html>
<head>
    <title>实时视频流</title>
    <script src="https://cdn.jsdelivr.net/npm/flv.js@1.6.2/dist/flv.min.js"></script>
</head>
<body>
<video id="videoElement" controls width="800" height="450"></video>

<script>
    $(document).ready(function() {
        // 使用WebSocket接收FLV流
        const videoElement = document.getElementById('videoElement');

        // 创建MediaSource
        const mediaSource = new MediaSource();
        videoElement.src = URL.createObjectURL(mediaSource);

        mediaSource.addEventListener('sourceopen', () => {//添加事件监听
            const sourceBuffer = mediaSource.addSourceBuffer('video/x-flv; codecs="avc1.42E01E,mp4a.40.2"');
            const ws = new WebSocket('ws://localhost:8080/flv');

            ws.binaryType = 'arraybuffer';

            ws.onmessage = function (event) {
                if (mediaSource.readyState === 'open') {
                    sourceBuffer.appendBuffer(new Uint8Array(event.data));
                }
            };

            ws.onerror = function (error) {
                console.error('WebSocket Error:', error);
            };

            ws.onclose = function () {
                console.log('WebSocket connection closed');
            };
        });
    })
</script>
</body>
</html>